<template>
  <el-form :model="addressInfo" :rules="rules" ref="addressInfo" label-width="100px">
      <el-row>
        <el-col :span="12" :offset="6">
            <el-form-item label="收件人" prop="consignee_name">
                <el-input v-model="addressInfo.consignee_name"></el-input>
              </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
            <el-form-item label="联系方式1" prop="phone1">
                <el-input v-model="addressInfo.phone1"></el-input>
              </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <el-form-item label="联系方式2" prop="phone2">
            <el-input v-model="addressInfo.phone2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="地区" prop="selectedOptions">
              <el-cascader :options="areaList" v-model="selectedOptions"  @active-item-change="handleItemChange" :props="props"></el-cascader>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <el-form-item label="详细地址" prop="detail">
            <el-input v-model="addressInfo.detail"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="邮编" prop="ZipCode">
              <el-input v-model="addressInfo.zip_code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
          <el-col :span="12" :offset="6">
              <el-form-item>
                  <el-button type="primary" @click="submitForm('addressInfo')">保存</el-button>
                  <el-button @click="cancel()">取消</el-button>
                </el-form-item>
          </el-col>
        </el-row>
  </el-form>
</template>
<script>
export default{
  data () {
    let checkArea = (rule, value, callback) => {
      if (this.selectedOptions.length !== 4) {
        callback(new Error('请选择地区'))
      } else {
        callback()
      }
    }
    const self = this
    this.$axios.get('/api/Dictionary/GetProvince').then(function (data) {
      data.forEach(element => {
        element.list = []
      })
      self.areaList = data
    })
    let id = this.$route.query.id
    if (id !== 0 && id !== undefined) {
      this.$axios.get('/api/Address/Get?id=' + id).then(function (data) {
        self.addressInfo = data[0]
        self.selectedOptions = [self.addressInfo.province_id, self.addressInfo.city_id, self.addressInfo.district_id, self.addressInfo.street_id]
      })
    }
    return {
      addressInfo: {
        consignee_name: '', // 收件人
        phone1: '', // 联系电话1
        phone2: '', // 联系电话2
        zip_code: '', // 邮编
        detail: '', // 详细地址
        province_id: 0, // 省id
        city_id: 0, // 市id
        district_id: 0, // 区id
        street_id: 0 // 镇街id
      },
      rules: {
        consignee_name: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
        ],
        phone1: [
          { required: true, message: '请输入联系方式1', trigger: 'blur' }
        ],
        selectedOptions: [
          { validator: checkArea, trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ]
      },
      areaList: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'list'
      },
      selectedOptions: []
    }
  },
  watch: {
    selectedOptions () {
      let selected = this.selectedOptions
      this.setChildren(this.areaList, selected, 1)
    }
  },
  methods: {
    async handleItemChange (val) {
      this.selectedOptions = val
    },
    async setChildren (list, val, level) {
      let type = ''
      switch (level) {
        case 1: type = 'GetCity?id=' + val[0]; break
        case 2: type = 'GetDistrict?id=' + val[1]; break
        case 3: type = 'GetStreet?id=' + val[2]; break
        default: return null
      }
      let temp = null
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (item.id === val[level - 1]) {
          if (item.list === null || item.list === undefined || item.list.length === 0) {
            let data = await this.$axios.get('/api/Dictionary/' + type)
            if (level < 3) {
              data.forEach(element => { element.list = [] })
            }
            item.list = data
          }
          temp = item
        }
      }
      if (level < val.length && level < 3) {
        this.setChildren(temp.list, val, level + 1)
      }
    },
    submitForm (formName) {
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addressInfo.province_id = this.selectedOptions[0]
          this.addressInfo.city_id = this.selectedOptions[1]
          this.addressInfo.district_id = this.selectedOptions[2]
          this.addressInfo.street_id = this.selectedOptions[3]
          if (this.addressInfo.user_address_id !== 0 && this.addressInfo.user_address_id !== undefined) {
            this.$axios.put('/api/Address/Edit?id=' + this.addressInfo.user_address_id, this.addressInfo, {msg: '编辑成功'}).then(function (data) {
              if (data.length !== 0) {
                self.$router.push('/temp')
              }
            })
          } else {
            this.$axios.post('/api/Address/Add', this.addressInfo, {msg: '添加成功'}).then(function (data) {
              if (data.length !== 0) {
                self.$router.push('/temp')
              }
            })
          }
        } else {
          self.$refs[formName].disabled = false
          return false
        }
      })
    },
    cancel () {
      this.$router.push('/temp')
    }
  }
}
</script>
